<template>
    <div :class="['classify',{'border':item.Layout==='border'}]">
        <h2>{{item.Subject}}</h2>
        <div class="list">
            <dl :class="{'active':activeInd===ind}" v-for="(cItem,ind) in item.Content" :key="ind" 
            @click="choose(ind,cItem.Type,item.Subject)">
                <dt v-if="cItem.Icon"><img :src="cItem.Icon" alt="">
                </dt>
                 <dd>{{cItem.Label}}</dd>
            </dl>
        </div>
    </div>
</template>
<script>
export default {
    props:['item'],
    data(){
        return {
            activeInd:0,
        }
    },
    methods:{
        choose(ind,type,subject){
            this.activeInd=ind
            this.$bus.$emit('chooseFn',subject,type)
        }
    }
}
</script>
<style lang="scss">
    .classify{
        width:100%;
       h2{
           font-size:16px;
       }
       .list{
           width:100%;
           display: flex;
           flex-wrap: wrap;
           dl{
               width:25%;
               dd{
                   text-align:center;
               }
               dt{
                   text-align:center;
               }
               img{
                   width:75px;
                   height:75px;
               }
               &.active{
                   border:solid 1px red;
               }
           }
       }
        &.border{
            dl{
                border:solid 1px #ccc;
                display: flex;
                dt{
                    img{
                        width:30px;
                        height:30px;
                    }
                }
            }
        }
    }

</style>


